<template>
	<view class="content display displayColumn displaycenter_aliem  width-100">
		<u-navbar @rightClick="rightClick" :autoBack="true" :placeholder="true">
			<template slot="left">
				<uni-icons type="left" color="#212121;" size="23"></uni-icons>
			</template>
			<template slot="center">
				<text class="fontSize font_comm title">数据中心</text>
			</template>
		</u-navbar>
		<view class="fn_select display  width-100 displaycenter_aliem M-T30">
			<view class="fn_select_left display  all_item M-L24" @click="show=true">
				<span class="fn_sel">{{columns1[numerSelect].stationName}}</span>
				<uni-icons type="down" style="margin-left: 8rpx;" color="#72778A" size="15"></uni-icons>
			</view>
			<view class="fn_select_right display  displaycenter_aliem M-R24">
				<view
					:class="{fn_number:selectIndex==index,fn_number1:selectIndex!=index, display:true,  all_item:true,'M-L30':true}"
					v-for="(item,index) in numberArr" :key="index" @click="changeWODEindex(index)">
					<span class="fn_tianshu" :style="{color:selectIndex==index?'#FFF':'#72778A;'}">{{item}}</span>
				</view>
			</view>
		</view>
		<view class="fn_changes display  width-100" style="margin-top: 40rpx;">
			<view class="changes_left display  displaycenter_aliem">
				<image class="fn_iamge M-L24"
					src="http://mkxd-app.oss-cn-beijing.aliyuncs.com/2025/01/11/6561a815622445d4a06c9d0b6231e6df.png"
					mode=""></image>
				<span class="fn_txt1 M-R24" style="margin-left: 8rpx;">数据概览</span>
			</view>
			<view class="changes_right display  displaycenter_aliem">
				<span class="update M-R24">更新时间：{{nowDate}}</span>
			</view>
		</view>
		<!-- 四个相框 -->
		<view class="fn_xiangkuang display  width_699 M-T24">
			<view class="one_item display  displayColumn displaycenter_jus">
				<view class="one_card display  displaycenter_aliem">
					<span class="fn_xiaoshou M-L24">销售金额</span>
				</view>
				<view class="two_card display  displaycenter_aliem M-T16">
					<span class="wode M-L24">￥<span style="font-size: 40rpx;">{{infos.totalAmount || 0}}</span></span>
				</view>
				<view class="three_card display  displaycenter_aliem M-L24" style="margin-top: 12rpx;" v-if="false">
					<span class="fn_ttx11">昨日:￥18.36万</span>
					<uni-icons type="arrow-up" color="#C34439" size="15"></uni-icons>
					<span class="fn_baifen">20%</span>
				</view>
			</view>
			<view class="one_item display  displayColumn displaycenter_jus">
				<view class="one_card display  displaycenter_aliem">
					<span class="fn_xiaoshou M-L24">订单数</span>
				</view>
				<view class="two_card display  displaycenter_aliem M-T16">
					<span class="wode M-L24"><span style="font-size: 40rpx;">{{infos.orderNums || 0}}笔</span></span>
				</view>
				<view class="three_card display  displaycenter_aliem M-L24" style="margin-top: 12rpx;" v-if="false">
					<span class="fn_ttx11">昨日:6000笔</span>
					<uni-icons type="arrow-up" color="#C34439" size="15"></uni-icons>
					<span class="fn_baifen">20%</span>
				</view>
			</view>
		</view>
		<view class="fn_xiangkuang display  width_699 M-T24">
			<view class="one_item display  displayColumn displaycenter_jus">
				<view class="one_card display  displaycenter_aliem">
					<span class="fn_xiaoshou M-L24">加油量</span>
				</view>
				<view class="two_card display  displaycenter_aliem M-T16">
					<span class="wode M-L24">L<span style="font-size: 40rpx;">{{infos.totalVolume || 0}}</span></span>
				</view>
				<view class="three_card display  displaycenter_aliem M-L24" style="margin-top: 12rpx;" v-if="false">
					<span class="fn_ttx11">昨日:￥18.36万</span>
					<!-- <uni-icons type="arrow-up" color="#C34439" size="15"></uni-icons> -->
					<uni-icons type="arrow-down" color="#C34439" size="15"></uni-icons>
					<span class="fn_baifen">20%</span>
				</view>
			</view>
			<view class="one_item display  displayColumn displaycenter_jus">
				<view class="one_card display  displaycenter_aliem">
					<span class="fn_xiaoshou M-L24">优惠金额</span>
				</view>
				<view class="two_card display  displaycenter_aliem M-T16">
					<span class="wode M-L24">￥<span style="font-size: 40rpx;">0</span></span>
				</view>
				<view class="three_card display  displaycenter_aliem M-L24" style="margin-top: 12rpx; "v-if="false">
					<span class="fn_ttx11">昨日:￥18.36万</span>
					<uni-icons type="arrow-up" color="#C34439" size="15"></uni-icons>
					<span class="fn_baifen">20%</span>
				</view>
			</view>
		</view>
		<!-- 向右滑动 -->
		<scroll-view class="scroll-view_H" scroll-x="true" style="margin-top: 30rpx;">
			<block v-for="(item,index) in infos.petrolDatas" :key="index">
				<view class="display displayColumn width_699" style="background: #fff;border-radius: 24rpx;">
					
				
				<view class="jinqiang display M-T24" style="justify-content: space-between;">
					<span class="fn_jiuwu M-L24 ">{{item.petrolName}}</span>
					<view class="displaycenter_aliem display M-R24">
						<!-- <span class="shouqi">收起</span> -->
						<!-- <uni-icons type="down" color="#72778A" size="18"></uni-icons> -->
					</view>
				</view>
				<view class="fn_xiangkuang1 display  width_699  M-T24 ">
					<view class="one_item1 display  displayColumn displaycenter_jus M-L24">
						<view class="one_card display  displaycenter_aliem">
							<span class="fn_xiaoshou M-L24">销售额</span>
						</view>
						<view class="two_card display  displaycenter_aliem M-T16">
							<span class="wode M-L24" style="color: #FF9901;">￥<span
									style="font-size: 40rpx;">{{item.totalAmount}}</span></span>
						</view>
						<!-- <view class="three_card display  displaycenter_aliem M-L24" style="margin-top: 12rpx;"
							>
							<span class="fn_ttx11">订单数:{{item.orderNums}}</span>
							<uni-icons type="arrow-up" color="#C34439" size="15"></uni-icons>
							<span class="fn_baifen">20%</span> 
						</view>-->
					</view>
					<view class="one_item1 display  displayColumn displaycenter_jus M-L24">
						<view class="one_card display  displaycenter_aliem">
							<span class="fn_xiaoshou M-L24">订单数</span>
						</view>
						<view class="two_card display  displaycenter_aliem M-T16">
							<span class="wode M-L24" style="color: #FF9901;"><span
									style="font-size: 40rpx;">{{item.orderNums}}</span></span>
						</view>
						<!-- <view class="three_card display  displaycenter_aliem M-L24" style="margin-top: 12rpx;"
							>
							<span class="fn_ttx11">订单数:{{item.orderNums}}</span>
							<uni-icons type="arrow-up" color="#C34439" size="15"></uni-icons>
							<span class="fn_baifen">20%</span>
						</view> -->
					</view>
					<view class="one_item1 display  displayColumn displaycenter_jus M-L24">
						<view class="one_card display  displaycenter_aliem">
							<span class="fn_xiaoshou M-L24">加油量</span>
						</view>
						<view class="two_card display  displaycenter_aliem M-T16">
							<span class="wode M-L24" style="color: #FF9901;"><span
									style="font-size: 40rpx;">{{item.totalVolume}}</span></span>
						</view>
						<!-- <view class="three_card display  displaycenter_aliem M-L24" style="margin-top: 12rpx;"
							>
							<span class="fn_ttx11">订单数:{{item.orderNums}}</span>
							<uni-icons type="arrow-up" color="#C34439" size="15"></uni-icons>
							<span class="fn_baifen">20%</span>
						</view> -->
					</view>
				</view>
				</view>
			</block>
		</scroll-view>
		<view class="fn_changes display  width-100" style="margin-top: 40rpx;">
			<view class="changes_left display  displaycenter_aliem">
				<image class="fn_iamge M-L24"
					src="http://mkxd-app.oss-cn-beijing.aliyuncs.com/2025/01/11/b53e5cdf6c884fc6b7dbed67d425eb3e.png"
					mode=""></image>
				<span class="fn_txt1 M-R24" style="margin-left: 8rpx;">数据看板</span>
			</view>
		</view>
		<view class="zhexian display  width-100 all_item M-T20">
			<view class="zhexian_box display " style="padding: 15rpx;overflow: hidden;">
				<qiun-data-charts type="line" canvasId="scrolllineid"
					:opts="{enableScroll:false,xAxis:{scrollShow:true,itemCount:4,disableGrid:true}}"
					:chartData="chartsDataLine4" :ontouch="true" :canvas2d="true" />
			</view>
		</view>
		<view class="display width-100 " style="height: 100rpx;">
			
		</view>
		<u-picker @close="show=false" :show="show" :columns="columns" @cancel="cancel" @confirm="changeIso"></u-picker>
		
	</view>
</template>

<script>
	import demodata from '@/packageC/componets/demodata.json';
	import qiunDataCharts from '@/packageC/componets/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue';
	export default {
		components:{
			qiunDataCharts
		},
		data() {
			return {
				// nowDate: new Date().toLocaleString(),
				nowDate: '',
				show: false,
				columns1:[],
				columns: [
					[]
				],
				numerSelect:0,
				id: '',
				infos: {},
				numberArr: ['近七天', '近30天', '近90天'],
				selectIndex: 0,
				chartsDataLine4: {},
				shuju: {
					categories: [],
					series: []
				}
			}
		},
		onLoad(options) {
			console.log(options)
			this.id = options.id;
			this.getTimeStr();
			this.getInfos();
			// 获取加油站
			this.getStaticnsList();
			//因部分数据格式一样，这里不同图表引用同一数据源的话，需要深拷贝一下构造不同的对象
			//开发者需要自行处理服务器返回的数据，应与标准数据格式一致，注意series的data数值应为数字格式
			/*
			"Line": {
				"categories": ["0", "1", "2", "3", "4", "5","7", "8"],
				"series": [{
					"name": "订单",
					"data": [35, 8, 25, 37, 4, 20,20,20]
				}, {
					"name": "金额",
					"data": [70, 40, 65, 100, 44, 68,20,20]
				}, {
					"name": "客户",
					"data": [100, 80, 95, 150, 112, 132,20,20]
				}]
			},
			*/
			
		},
		methods: {
			getTimeStr(){
				let date = new Date(); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let Y = date.getFullYear() + '-';
				let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
				let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
				this.nowDate = Y + M + D + h + m + s;
			},
			changeWODEindex(index){
				this.selectIndex = index;
				this.reset();
				this.getInfos();
			},
			changeIso(e){
				this.numerSelect = e.indexs[0]
				this.show = false;
				this.id = this.columns1[this.numerSelect].id;
				this.reset();
				this.getInfos();
			},
			cancel(){
				this.show = false;
			},
			getStaticnsList(){
				this.$req.get('/xcx/petrolStation/getAllStations').then(res=>{
					console.log(res)
					this.columns1 = res.data.data;
					res.data.data.forEach(item=>{
						this.columns[0].push(item.stationName)
					})
				})
			},
			reset(){
				this.infos = {};
				this.chartsDataLine4 = {},
				this.shuju = {
					categories: [],
					series: []
				}
			},
			getInfos() {
				this.$modal.loading('加载中')
				let data = {
					stationId: this.id,
					limitDays: this.numberArr[this.selectIndex] == '近七天' ? '7' : this.numberArr[this.selectIndex] ==
						'近30天' ? '30' : '90'
				}
				console.log(data)
				this.$req.get('/xcx/petrolCardLog/getData', data).then(res => {
					console.log(res)
					let orderNums = []; //油量
					let countCommission = []; //金额
					let customers = []; //订单
					if(res.data.code==200){
						this.infos = res.data.data;
						
						this.infos.petrolDatas.forEach((item,index)=>{
							
								this.shuju.categories.push(index)
								orderNums.push(item.totalVolume);
								countCommission.push(item.totalAmount)
								customers.push(item.orderNums)
						})
						
						this.shuju.series.push({
							name: '油量',
							data: orderNums
						})
						this.shuju.series.push({
							name: '金额',
							data: countCommission
						})
						this.shuju.series.push({
							name: '订单',
							data: customers
						})
						this.chartsDataLine4 = this.shuju;
						this.$modal.closeLoading()
						console.log(this.chartsDataLine4)
					}else{
						this.$modal.closeLoading()
						this.$modal.msg(res.data.msg);
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.fn_select {
		justify-content: space-between;
	}

	.fn_select_left {
		padding-left: 12rpx;
		padding-right: 12rpx;
		height: 42rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid #72778A;
	}

	.scroll-view_H {
		white-space: nowrap;
		// width: 100%;
		width: 690rpx;
		// min-height: 600rpx;
		padding-bottom: 24rpx;
		background: #fff;
	}

	.fn_number {
		// width: 94rpx;

		height: 42rpx;
		background: #126BC9;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.fn_number1 {
		height: 42rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid #72778A;
	}

	.fn_tianshu {
		padding-left: 14rpx;
		padding-right: 14rpx;
		font-weight: 600;
		font-size: 24rpx;
		color: #FFFFFF;
	}

	.fn_iamge {
		width: 32rpx;
		height: 32rpx;
	}

	.fn_txt1 {
		font-weight: 600;
		font-size: 32rpx;
		color: #000000;
	}

	.update {
		font-weight: 400;
		font-size: 24rpx;
		color: #72778A;
	}

	.fn_changes {
		justify-content: space-between;
	}

	.one_item {
		width: 330rpx;
		height: 200rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}

	.one_item1 {
		width: 50%;
		height: 200rpx;
		padding-right: 24rpx;
		background: rgba(18, 107, 201, 0.1);
		border-radius: 24rpx 24rpx 24rpx 24rpx;

	}

	.fn_xiaoshou {
		font-weight: 400;
		font-size: 24rpx;
		color: #212121;
	}

	.fn_baifen {
		font-weight: 600;
		font-size: 24rpx;
		color: #C34439;
	}

	.wode {
		font-weight: 600;
		font-size: 24rpx;
		color: #126BC9;
	}

	.fn_xiaoshou {
		font-weight: 400;
		font-size: 24rpx;
		color: #212121;
	}

	.fn_ttx11 {
		font-weight: 400;
		font-size: 24rpx;
		color: #72778A;
	}

	.fn_xiangkuang {
		justify-content: space-between;
	}

	.fn_jiuwu {
		font-weight: 600;
		font-size: 28rpx;
		color: #126BC9;
	}

	.shouqi {
		font-weight: 400;
		font-size: 24rpx;
		color: #72778A;
	}

	.zhexian_box {
		width: 690rpx;
		height: 396rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}
	.fn_nulls{
		position: fixed;
		bottom: 108rpx;
	}
</style>